<div class="dropdown-options">

  <div class="modal-header">
    <h4 class="modal-title">{{title}}选项列表</h4>
    <button type="button" class="close" aria-label="Close" (click)="close()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

    <div *ngIf="model" class="row">

      <form [formGroup]="form" class="form-inline my-validate-form">
        <label>取值</label>
        <input type="text" class="form-control" name="label" formControlName="label"
               [(ngModel)]="model.label" #label>

        <button (click)="save()" type="button" class="btn btn-primary" [disabled]="!form.valid">
          <span *ngIf="!model.id">保存</span>
          <span *ngIf="model.id">更新</span>
        </button>
        <button (click)="cancel()" type="button" class="btn btn-secondary">
          <span>重置</span>
        </button>

        <label class="validate-errors inline">
          <label class="validate-error inline" *ngFor="let msg of formErrors">
            <label>{{ msg }}</label>
          </label>
        </label>

      </form>

    </div>

    <div class="row">
      <table class="table">
        <thead class="thead-default">
        <tr>
          <th>名称</th>
          <th>取值</th>
          <th>是否默认</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of field.options; let i = index;">
          <td>{{ item.label }}</td>
          <td>{{ item.value }}</td>
          <td>
            <input *ngIf="!item.defaultVal" (change)="setDefault(item)" [(ngModel)]="item.defaultVal" type="checkbox" name="default" #default>
            <input *ngIf="item.defaultVal" onclick="return false;" [(ngModel)]="item.defaultVal" type="checkbox" name="default" #default>
          </td>
          <td>
            <span *ngIf="i == 0" class="ionic-icon link placeholder"></span>
            <span (click)="changeOrder(item, 'up', i)" *ngIf="i > 0" class="fa fa-arrow-up ionic-icon link"></span>

            <span (click)="changeOrder(item, 'down', i)" *ngIf="i < field.options.length - 1" class="fa fa-arrow-down ionic-icon link"></span>
            <span *ngIf="i == field.options.length - 1" class="ionic-icon link placeholder"></span>
            &nbsp;
            <span (click)="edit(item)" class="link no-underline">编辑</span>
            <span (click)="delete(item)" class="link no-underline">删除</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="close()">关闭</button>
  </div>

</div>
